@use "design-system";

@import 'components/';

.multichain-page {
  $height-screen-sm-min: 720px;

  transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;

  &--has-app-header {
    & .multichain-page__inner-container {
      border-radius: 0 0 2px 2px;
      border: 0;
      // Matches the box-shadow of the .main-container
      box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
    }
  }

  &__inner-container {
    border: 1px solid var(--color-border-muted);
    border-radius: 2px;
  }
}

.multichain-app-header-logo + .multichain-page {
  $height-screen-sm-min: 720px;

  @media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
    padding-top: 0;
  }
}

.snap-view > .multichain-page {
  $height-screen-sm-min: 720px;

  @media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.app--sidepanel .multichain-page {
  $height-screen-sm-min: 720px;

  @media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
    padding-top: 0;
    padding-bottom: 0;
  }
}
